import React, { useEffect, useState } from "react";
import "./style.css";
import Mock from 'mockjs'
import axios from "axios";

Mock.mock('/api/title', () => {
  return ["标题1", "标题2", "标题3", "标题4"]
})

const App1 = () => {

  const [list, setList] = useState([]);
  const [index, setIndex] = useState(0);
  const handleChange = (i) => {
    setIndex(i)
  };


  useEffect(() => {
    // 首次挂载完毕完毕执行一次
    axios.get('/api/title').then(resp => {
      console.log(resp.data)
      setList(resp.data)
    })
  }, [])


  return (
    <div className="title">
      {list.map((v, i) => {
        return (
          <div
            key={i}
            className={index === i ? "active" : ""}
            onClick={() => handleChange(i)}
          >
            {v}
          </div>
        );
      })}
    </div>
  );
};

export default App1;
